<template>
  <div class="footbox">
    <div class="poi">
      <span>鼠标经纬度:{{ info.mouse }}</span>

      <span>经度:{{ info.lon }}</span>
      <span>纬度:{{ info.lat }}</span>
      <span>海拔:{{ info.height }}米</span>
      <span>方向:{{ info.heading }}度</span>
      <span>俯仰:{{ info.pitch }}度</span>
      <!-- <span>{{ info.fps }}FPS</span> -->
      <!-- <span>视高:{{ info.heightAboveEllipsoid }}米</span> -->
      <!-- <span>{{ info.yc }}ms</span>
      <span>{{ info.fps }}FPS</span> -->
    </div>
  </div>
</template>
  
  <script setup>
import { ref, onMounted,watch } from 'vue'
import useDebounce from '../../hook/useDebounce'
import {useMapStoreStore} from '../../stores/index';
const store = useMapStoreStore()
const flag = ref(true)
const info = ref({
  lon: 0.0,
  lat: 0.0,
  height: 0.0,
  heading: 0.0,
  pitch: 0.0,
  heightAboveEllipsoid: 0.0,
  fps: 0,
  yc: 0,
  mouse:"",
})



const getMapInfo = () => {
  
  const positionCartographic = viewer.camera.positionCartographic
  const longitude = Cesium.Math.toDegrees(positionCartographic.longitude)
  const latitude = Cesium.Math.toDegrees(positionCartographic.latitude)
  const height = positionCartographic.height
  const heading = Cesium.Math.toDegrees(viewer.camera.heading)
  const pitch = Cesium.Math.toDegrees(viewer.camera.pitch)
  const cartographic = Cesium.Ellipsoid.WGS84.cartesianToCartographic(viewer.camera.position)
  const heightAboveEllipsoid = cartographic.height
  info.value.lon = longitude.toFixed(4)
  info.value.lat = latitude.toFixed(4)
  info.value.height = height.toFixed(1)
  info.value.heading = heading.toFixed(0)
  info.value.pitch = pitch.toFixed(0)
  info.value.heightAboveEllipsoid = heightAboveEllipsoid.toFixed(1);

}
const getMouseXY = ()=>{
  var canvas=viewer.scene.canvas;
var ellipsoid=viewer.scene.globe.ellipsoid;
var handler = new Cesium.ScreenSpaceEventHandler(canvas);
handler.setInputAction(useDebounce(function(movement){
       
             var cartesian=viewer.camera.pickEllipsoid(movement.endPosition, ellipsoid);
              if(cartesian){
                   var cartographic=viewer.scene.globe.ellipsoid.cartesianToCartographic(cartesian);
                   //将地图坐标（弧度）转为十进制的度数
                    var lat_String=Cesium.Math.toDegrees(cartographic.latitude).toFixed(4); //经
                    var log_String=Cesium.Math.toDegrees(cartographic.longitude).toFixed(4);//纬
                    var alti_String=(viewer.camera.positionCartographic.height/1000).toFixed(2);//高
                    info.value.mouse = log_String+","+lat_String
               }
        },100),Cesium.ScreenSpaceEventType.MOUSE_MOVE);
}

const useDebounceInfo = useDebounce(getMapInfo, 500)
const getFps = () => {
  let frameCount = 0
  let lastTime = performance.now()
  viewer.scene.preRender.addEventListener(function () {
    frameCount++
    const currentTime = performance.now()
    if (currentTime - lastTime >= 2000) {
      // 每秒计算一次
      info.value.fps = (frameCount / ((currentTime - lastTime) / 1000)).toFixed(0)
      frameCount = 0
      lastTime = currentTime
    }
  })
}
const init = () => {
  getMapInfo();
  // getFps();
  getMouseXY()
  viewer.camera.changed.addEventListener(useDebounceInfo);
};

watch(()=>store.isInitCesium,(e)=>{
  if(e){
    init();
  }
})
onUnmounted(() => {
   viewer.camera.changed.removeEventListener(useDebounceInfo);
})


</script>
  
  <style lang="scss" scoped>
.footbox {
  height: 100%;
  padding: 0 20px;
  box-sizing: border-box;
  color: #b9eeff;
  line-height: 30px;
  font-size: 14px;
  display: flex;
  justify-content: end;

  background-color: rgb(0, 25, 51);
  border: 1px solid #0e9cff;
  box-shadow: 0 0 10px #1678e1;
  border-radius: 8px;
  .poi {
    width: 1000px;
    display: flex;
    justify-content: space-around;
  }
}
</style>